<template>
  <div class="tabs-view-container">
    <el-tabs
        v-model="activeTab"
        type="card"
        closable
        @tab-remove="removeTab"
        @tab-click="handleTabClick"
    >
      <el-tab-pane
          v-for="tab in visitedViews"
          :key="tab.path"
          :label="tab.title"
          :name="tab.path"
      >
        <template #label>
          <el-icon><component :is="tab.icon" /></el-icon>
          <span>{{ tab.title }}</span>
        </template>
      </el-tab-pane>
    </el-tabs>
    <div class="tabs-content">
      <router-view v-slot="{ Component }">
        <keep-alive :include="cachedViews">
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { House, InfoFilled, Phone } from '@element-plus/icons-vue'

export default {
  components: {
    House,
    InfoFilled,
    Phone
  },
  setup() {
    const router = useRouter()
    const route = useRoute()

    const visitedViews = ref([])
    const cachedViews = ref([])
    const activeTab = ref('')

    const menuItems = [
      { path: "/", icon: "House", text: "首页" },
      { path: "/studentList", icon: "InfoFilled", text: "学生管理" },
      { path: "/courseList", icon: "InfoFilled", text: "课程管理" },
      { path: "/classList", icon: "InfoFilled", text: "班级管理" },
      { path: "/skipClassList", icon: "InfoFilled", text: "选课管理" },
      { path: "/dbManagementList", icon: "InfoFilled", text: "数据库管理" },
      { path: "/oaMessageList", icon: "InfoFilled", text: "消息管理" },
      { path: "/about", icon: "InfoFilled", text: "字典表管理" },
      { path: "/systemUser", icon: "InfoFilled", text: "用户管理" },
      { path: "/about", icon: "InfoFilled", text: "角色管理" },
      { path: "/about", icon: "InfoFilled", text: "菜单管理" },
      { path: "/about", icon: "InfoFilled", text: "配置管理" },
      { path: "/about", icon: "InfoFilled", text: "关于我们" },
      { path: "/contact", icon: "Phone", text: "联系我们" }
    ]

    const addTab = (route) => {
      const { path } = route
      const menuItem = menuItems.find(item => item.path === path)

      if (!menuItem) return

      if (visitedViews.value.some(v => v.path === path)) {
        activeTab.value = path
        return
      }

      const tab = {
        path,
        title: menuItem.text,
        icon: menuItem.icon,
        name: path
      }

      if (visitedViews.value.length >= 10) {
        visitedViews.value.shift()
        cachedViews.value.shift()
      }

      visitedViews.value.push(tab)
      cachedViews.value.push(path)
      activeTab.value = path
    }

    watch(
        () => route.path,
        () => {
          addTab(route)
        },
        { immediate: true }
    )

    const removeTab = (targetPath) => {
      const tabs = visitedViews.value
      let activePath = activeTab.value

      if (activePath === targetPath) {
        tabs.forEach((tab, index) => {
          if (tab.path === targetPath) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activePath = nextTab.path
            }
          }
        })
      }

      visitedViews.value = tabs.filter(tab => tab.path !== targetPath)
      cachedViews.value = cachedViews.value.filter(name => name !== targetPath)

      if (activePath) {
        router.push(activePath)
      }
    }

    const handleTabClick = (tab) => {
      router.push(tab.props.name)
    }

    return {
      visitedViews,
      cachedViews,
      activeTab,
      removeTab,
      handleTabClick
    }
  }
}
</script>

<style scoped>
.tabs-view-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tabs-content {
  flex: 1;
  overflow: auto;
  padding: 10px;
  background-color: #fff;
}

:deep(.el-tabs__header) {
  margin: 0;
  background-color: #fff;
  padding: 0px 3px 0px;
}

:deep(.el-tabs__item) {
  height: 30px;
  line-height: 30px;
  padding: 0 20px !important;
}

:deep(.el-icon) {
  margin-right: 5px;
}
</style>

